<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-spin :spinning="spinning">
        <div class="student_avatar">
          <span
            v-if="infomation.head_portrait&&infomation.head_portrait.url"
            style="display:inline-block;width:64px;height:64px;overflow:hidden;border:1px solid #e8e8e8;border-radius:50%;"
          >
            <img
              :src="infomation.head_portrait.url"
              style="width:100%;height:auto;overflow:hidden;margin-right:5px;"
              alt
            />
          </span>
          <a-avatar :size="64" icon="user" v-else />
          <!-- <a-avatar :size="64" icon="user" /> -->
          <span class="studentBasicInfo">
            <span class="studentName">{{infomation.name}}</span>
            <span class="studentSex">
              <a-icon 
                type="woman"
                style="color:rgb(251, 100, 101);font-size:16px;"
                v-if="infomation.sex ==2"
              />
              <a-icon
                type="man"
                style="color:rgb(71, 145, 237);font-size:16px;"
                v-if="infomation.sex ==1"
              />
            </span>
            <span class="studentAge" v-if="infomation.age&&infomation.age !== 0">{{infomation.age}}</span>
            <br />
            <span class="beReading" v-if="infomation.type==1">在读学员</span>
            <span class="beReading" v-else-if="infomation.type==2">历史学员</span>
            <span class="beReading" v-else>潜在学员</span>
          </span>
          <span class="studentInfoAction">
            <a-button
              type="primary"
              @click="$refs.editStudent.showDraw(Number($route.query.id))"
            >编辑学生资料</a-button>
            <a-button @click="signUp(Number($route.query.id))">报名</a-button>
            <!-- record.structures_id,record.project_id||null -->
            <a-button @click="showLessonTable()">试听</a-button>
            <!-- <a-button type="danger" @click="del()">删除学员</a-button> -->
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item
                  key="1"
                  @click="toHistory($route.query.id)"
                  v-if="$route.query.id&&infomation.type&&infomation.type==1"
                >转为历史学员</a-menu-item>
                <a-menu-item key="2" @click="del()">删除学员</a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px">
                <a-icon type="ellipsis" />
              </a-button>
            </a-dropdown>
          </span>
        </div>
        <detail-list style="padding:10px 94px;">
          <detail-list-item term="出生日期">{{infomation.birthday}}</detail-list-item>
          <detail-list-item
            :term="infomation.main_parent_type==0?'联系电话':infomation.main_parent_type==1?'本人电话':infomation.main_parent_type==2?'妈妈电话':infomation.main_parent_type==3?'爸爸电话':infomation.main_parent_type==4?'爷爷电话':infomation.main_parent_type==5?'奶奶电话':infomation.main_parent_type==6?'外公电话':infomation.main_parent_type==7?'外婆电话':'联系电话'"
          >{{infomation.main_phone}}</detail-list-item>
          <detail-list-item term="学员来源">{{infomation.source_name||'--'}}</detail-list-item>
          <detail-list-item term="就读学校">{{infomation.school_name}}</detail-list-item>
          <detail-list-item term="备用手机">{{infomation.spare_phone}}</detail-list-item>
          <detail-list-item term="跟进人">{{infomation.user_name}}</detail-list-item>
          <detail-list-item term="意向课程">{{infomation.grade_name||'--'}}</detail-list-item>
          <detail-list-item term="学管师">{{infomation.academic_supervisor_name }}</detail-list-item>
          <detail-list-item term="学号" :span="2">{{infomation.studentid}}</detail-list-item>
          <detail-list-item term="标签" :column="{ xs: 8, sm: 16, md: 24}">
            <span v-for="(item,index) in infomation.studentLabels" :key="index">
              <span>
                {{item.content}}
                <span v-if="index!==infomation.studentLabels.length-1">,</span>
              </span>
            </span>
          </detail-list-item>
          <detail-list-item></detail-list-item>
          <detail-list-item></detail-list-item>
          <detail-list-item term="家庭住址">
            <span style="word-break:break-all;">{{infomation.address}}</span>
          </detail-list-item>
          <detail-list-item></detail-list-item>
          <detail-list-item></detail-list-item>
          <detail-list-item term="备注">
            <span style="word-break:break-all;">{{infomation.remarks}}</span>
          </detail-list-item>
        </detail-list>
      </a-spin>
    </a-card>
    <a-card
      :bordered="false"
      :bodyStyle="{ padding: '6px 16px', height: '100%'}"
      :style="{ height: '100%','margin-top':'20px' }"
    >
      <a-tabs v-model="defaultOpenChild" @change="changes($event)">
        <a-tab-pane tab="报读课程" key="1">
          <schedule :studentId="queryID" v-if="showSchedule" :studentInfo="infomation" @changes="changeTab" @updateStudent="update"></schedule>
        </a-tab-pane>
        <a-tab-pane tab="跟进记录" key="2">
          <follow-up :studentId="queryID" v-if="showFollowUp"></follow-up>
        </a-tab-pane>
        <a-tab-pane tab="订单记录" key="3">
          <order-log :studentId="queryID" v-if="showOrderLog"></order-log>
        </a-tab-pane>
        <a-tab-pane tab="上课记录" key="4">
          <take-class :studentId="queryID" v-if="showTakeClass"></take-class>
        </a-tab-pane>
        <a-tab-pane tab="成长档案" key="5">
          <foot-print :studentId="queryID" v-if="showFootPrint" :studentName="infomation.name"></foot-print>
        </a-tab-pane>
        <a-tab-pane tab="成绩单" key="6">
          <score-table :studentId="queryID" v-if="showScoreTable"></score-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <edit-student
      ref="editStudent"
      :isQianzai="$route.query.isQianzai==3?true:false"
      @return="getInfo"
    ></edit-student>
    <grade-model ref="grades" @reload="reloadSelect"></grade-model>
    <sources-model ref="sources" @reload="reloadSelect"></sources-model>
    <tags-model ref="tags" @reload="reloadSelect"></tags-model>
    <listen-lesson-table ref="lessonTable" :student_id="studentID"></listen-lesson-table>
  </div>
</template>

<script>
import editStudent from '@/components/studentDrawer/editStudent'
import moment from 'moment'
import DetailList from '@/components/tools/DetailList'
import topNavBar from '@/components/topNavBar/topNavBar'
import { studentInfo, studentDel, studentEdit, studentToHistory } from '@/api/student'
import listenLessonTable from '@/components/lesson'
import { gradeList } from '@/api/grade'
import { sourceList } from '@/api/sources'
import gradeModel from '@/components/gradeManage'
import sourcesModel from '@/components/studentSource'
import { accountList } from '@/api/account'
import { tagList } from '@/api/tag'
import tagsModel from '@/components/tagsManage'
import { deepClone } from '@/utils/pub_methods_base'
import followUp from './child/followUp'
import footPrint from './child/footPrint'
import orderLog from './child/orderLog'
import schedule from './child/schedule'
import scoreTable from './child/scoreTable'
import takeClass from './child/takeClass'
const DetailListItem = DetailList.Item
export default {
  name: 'BaseForm',
  components: {
    topNavBar,
    DetailList,
    DetailListItem,
    gradeModel,
    sourcesModel,
    tagsModel,
    followUp,
    footPrint,
    orderLog,
    schedule,
    scoreTable,
    takeClass,
    listenLessonTable,
    editStudent,
  },
  data() {
    return {
      queryID: null,
      a:1,
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      nowRouteTitle: '',
      infomation: {},
      studentID: null,
      spinning: false,
      confirmLoading: false,
      dateFormat: 'YYYY-MM-DD',
      schoolID: null,
      //form表单下拉框
      gradeSelect: [], //年级下拉
      sourceSelect: [], //学生来源下拉
      userSelect: [], //学管师  跟进人下拉
      tagSelect: [],
      studentTypeSelect: [
        {
          id: 1,
          name: '在读学员',
        },
        {
          id: 2,
          name: '历史学员',
        },
        {
          id: 3,
          name: '潜在学员',
        },
      ],
      // 学生信息
      form: {
        main_parent_type: 2,
        spare_parent_type: 3,
        type: 1,
        birthday: null,
        label_ids: [],
      },
      studentBirthday: moment(), //学生出生日期,仅用于双向绑定回显
      relation: [
        { id: 0, text: '无' },
        { id: 1, text: '本人' },
        { id: 2, text: '妈妈' },
        { id: 3, text: '爸爸' },
        { id: 4, text: '爷爷' },
        { id: 5, text: '奶奶' },
        { id: 6, text: '外公' },
        { id: 7, text: '外婆' },
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        main_phone: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！' }],
        spare_phone: [{ required: false, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！' }],
      },
      defaultOpenChild: '1',
      showSchedule: true,
      showFollowUp: false,
      showOrderLog: false,
      showTakeClass: false,
      showFootPrint: false,
      showScoreTable: false,
    }
  },

  created() {
    this.spinning = true
    this.schoolID = this.$store.state.user.school
    this.nowRouteTitle = this.$route.meta.title
    this.queryID = this.$route.query.id
    if (!this.queryID) {
      this.back()
    }
    if (this.$route.query.childType == 2) {
      this.defaultOpenChild = '2'
      this.changes(String(this.$route.query.childType))
    }
    this.getInfo()
  },
  methods: {
    update(){
      this.getInfo()
    },
    toHistory(data) {
      let that = this
      this.$confirm({
        title: '提示',
        content:
          '转为历史学员后,此学员将被移出所在班级,学员购买的课程将自动全部结课，未消耗的剩余课时将自动变为已消耗课时！',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          that.spinning = true
          studentToHistory(data)
            .then((res) => {
              that.$message.success('修改学员状态成功')
              that.getInfo()
              that.spinning = false
            })
            .catch((err) => {
              that.spinning = false
              that.$message.error(err.data.message || '修改学员状态失败')
            })
        },
      })
    },
    changes(val) {
      if (val == '1') {
        this.showSchedule = true
        this.showFollowUp = false
        this.showOrderLog = false
        this.showTakeClass = false
        this.showFootPrint = false
        this.showScoreTable = false
      } else if (val == '2') {
        this.showSchedule = false
        this.showFollowUp = true
        this.showOrderLog = false
        this.showTakeClass = false
        this.showFootPrint = false
        this.showScoreTable = false
      } else if (val == '3') {
        this.showSchedule = false
        this.showFollowUp = false
        this.showOrderLog = true
        this.showTakeClass = false
        this.showFootPrint = false
        this.showScoreTable = false
      } else if (val == '4') {
        this.showSchedule = false
        this.showFollowUp = false
        this.showOrderLog = false
        this.showTakeClass = true
        this.showFootPrint = false
        this.showScoreTable = false
      } else if (val == '5') {
        this.showSchedule = false
        this.showFollowUp = false
        this.showOrderLog = false
        this.showTakeClass = false
        this.showFootPrint = true
        this.showScoreTable = false
      } else if (val == '6') {
        this.showSchedule = false
        this.showFollowUp = false
        this.showOrderLog = false
        this.showTakeClass = false
        this.showFootPrint = false
        this.showScoreTable = true
      }
    },
    getInfo() {
      studentInfo(this.queryID)
        .then((res) => {
          this.infomation = res
          this.form = JSON.parse(JSON.stringify(res))
          this.studentBirthday = moment(res.birthday)
          this.spinning = false
        })
        .catch((err) => {
          this.spinning = false
        })
    },
    del() {
      if (this.queryID) {
        let that = this
        this.$confirm({
          title: '确认删除该学员?',
          content: '是否确认删除该学员吗？删除成功后数据不可恢复！',
          okText: '确定',
          okType: 'primary',
          cancelText: '取消',
          onOk() {
            that.spinning = true
            studentDel(that.queryID)
              .then((res) => {
                that.$message.success('删除成功')
                that.spinning = false
                that.back()
              })
              .catch((err) => {
                that.spinning = false
                that.$message.error(err.data.message || '删除失败')
              })
          },
        })
      } else {
        this.$message.warning('数据异常，请返回上一级重新进入本页面')
      }
    },
    back() {
      this.$router.go(-1)
    },
    reloadSelect() {
      gradeList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.gradeSelect = res.data
      })
      sourceList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.sourceSelect = res.data
      })
      accountList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.userSelect = res.data
      })
      tagList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.tagSelect = res.data
      })
    },
    showLessonTable() {
      this.studentID = this.$route.query.id
      this.$refs.lessonTable.showVisible()
    },
    signUp(e) {
      this.$router.push({ name: 'apply', query: { id:e } })
    },
    showChild(e) {
      if (e == 'grades') {
        this.$refs.grades.showModal()
      } else if (e == 'source') {
        this.$refs.sources.showModal()
      } else if (e == 'tags') {
        this.$refs.tags.showModal()
      }
    },
    moment,
    changeTab(val) {
      if (val) {
        this.defaultOpenChild = '4'

        this.changes(val)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.studentInfoAction {
  // display: inline-block;
  float: right;
  button {
    margin-left: 8px;
  }
}
.studentBasicInfo {
  display: inline-block;
  margin: 0 30px;
  // vertical-align: middle;
  .studentName {
    color: #373737;
    font-size: 16px;
  }
  .studentSex {
    padding: 0 10px;
  }
  .studentAge {
    color: #999;
  }
  .beReading {
    display: inline-block;
    // padding-top: 10px;
    border: 1px solid rgb(59, 189, 170);
    color: rgb(59, 189, 170);
    font-size: 12px;
    padding: 0 5px;
    margin-top: 5px;
  }
}
</style>